<template>
  <el-tabs v-model="activeName">
    <el-tab-pane :label="'收到的赞('+pariseList.length+')'" name="parise">
      <i class="el-icon-loading" v-if="isLoad" style="font-size:40px;margin:130px 250px;"></i>
      <div class="msg_list" v-for="(item,index) in pariseList" :key="index">
        <router-link tag="a" :to="{path:'/home/show/',query:{id:item.postId}}">
          <el-avatar :src="item.imgUrl" style="z-index:2;width:40px;height:40px;margin-left:15px;"></el-avatar>
          <el-avatar
            :src="item.imgUrl2"
            v-if="item.imgUrl2"
            style="z-index:1;position:absolute;left:5px;top:5px;width:40px;height:40px"
          ></el-avatar>
          <el-badge :is-dot="item.news" class="item"></el-badge>
          <div class="center">
            <div class="name">
              <div>{{item.publisher}}{{item.length}}人</div>
              <span class="msg">{{item.msg}}</span>
            </div>
            <div class="date">{{item.date}}</div>
          </div>
          <!-- <el-badge :is-dot="item.isread===0?true:false" class="item"></el-badge> -->
          <div class="content">{{item.content}}</div>
        </router-link>
      </div>
    </el-tab-pane>
    <!-- <el-tab-pane label="系统通知" name="third">
<div class="post_list" v-for="(item,index) in postreplies" :key="index">
        <router-link :to="{path:'/home/show/',query:{id:item.postId}}">
          <span>{{item.postTitle}}</span>
          <div>评论于{{item.commDate}}</div>
          <div
            style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
          >{{item.content}}</div>
          <el-badge :value="item.praiseCount" type="primary"></el-badge>
        </router-link>
      </div>
    </el-tab-pane>-->
  </el-tabs>
</template>
<script>
export default {
  props: ['postinfos', 'username', 'postreplies', 'pariseIsRead'],
  data() {
    return {
      activeName: 'parise',
      pariseList: [],
      isLoad: true
    }
  },
  methods: {
    // 根据id获取帖子内容
    async getpost(id) {
      const postRes = await this.$http.get('/getappointPost/' + id)
      if (postRes.meta.status !== 200) {
        return this.$Message.error('获取帖子信息失败')
      }
      return postRes.data.content
    },
    async getcomment(id) {
      const comRes = await this.$http.get('/getcomment', {
        params: {
          type: 'parise',
          id: id
        }
      })
      if (comRes.meta.status !== 200) {
        return this.$Message.error('获取帖子信息失败')
      }
      return comRes.data[0]
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoad = false
      this.comm.getnotice(this.username, this).then(data => {
        var parise = data.parise
        var postIdArr = []
        var pariseList = []
        parise.forEach(async (item, index) => {
          // 读取id在数据内的index
          var isPostId = postIdArr.findIndex(poId => {
            return poId.postId === item.postId
          })
          // 如果存储id数据没有此次id,就push
          // 并且请求帖子的内容
          if (isPostId === -1) {
            postIdArr.push({
              postId: item.postId,
              length: 1
            })
            console.log('1')
            console.log('现在的索引值：' + index)
            // 如果是点赞帖子，这里有帖子的id==postId
            // 如果是点赞评论，这里的postId是评论id，得到评论内容并且和postId
            this.comm.getuserImg(item.publisher, this).then(img => {
              item.imgUrl = img
            })
            if (item.isread === 0) {
              item.news = true
            }
            // var count = 0
            if (item.msg.indexOf('评') !== -1) {
              // console.log('现在的索引值：' + index)
              // 拿到评论内容var comment = await
              this.getcomment(item.postId).then(comment => {
                // count += 1
                item.content = comment.content
                // 拿到评论的帖子的id
                item.postId = comment.postId
                console.log('3')
              })
            } else {
              // console.log('现在的索引值：' + index)
              // 拿到帖子的内容var content = await
              this.getpost(item.postId).then(content => {
                // count += 1
                console.log('4')
                console.log(content)
                item.content = content
              })
            }
            // if (count) {
            //   pariseList.push(item)
            // }
            pariseList.push(item)
          } else {
            console.log('2')
            // console.log('现在的索引值：' + index)
            postIdArr[isPostId].length += 1
            var length = postIdArr[isPostId].length
            if (length === 2) {
              await this.comm.getuserImg(item.publisher, this).then(img => {
                // console.log('123: ' + isPostId)
                // console.log(pariseList)
                pariseList[isPostId].publisher += '、' + item.publisher + '等'
                pariseList[isPostId].imgUrl2 = img
              })
              // console.log(img)
            }
            // pariseList[isPostId].publisher += (await length) + '人'
            pariseList[isPostId].length = postIdArr[isPostId].length
            // console.log(isPostId + '数组长度： ' + postIdArr[isPostId].length)
            console.log('长度： ' + length)
          }
        })
        setTimeout(() => {
          this.pariseList = pariseList
        }, 500)
      })
    }, 500)
    setTimeout(() => {
      if (this.pariseIsRead) {
        this.$emit('pariseToCenter', 1)
      }
      this.comm.noticeRead(this.username, 0, 'isread', 'parise', 1, this)
    }, 1000)
  }
}
</script>
<style lang="less" scoped>
.el-tabs {
  .msg_list {
    display: flex;
    border-bottom: 1px solid #f4f4f5;
    width: 100%;
    height: 60px;
    .close {
      color: #999;
      cursor: pointer;
    }
    .close:hover {
      color: red;
    }
    a {
      position: relative;
      display: flex;
      width: 100%;
      padding-top: 10px;
      .el-avatar {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
      .center {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        .name {
          display: flex;
          margin: 5px 0;
          font-size: 14px;
          color: #555;
          > div {
            width: 150px;
          }
          .msg {
            margin-left: 20px;
            color: #000;
          }
        }
        .date {
          font-size: 12px;
          color: #999;
        }
      }
      .content {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis; // 溢出省略号
        margin-left: auto;
        height: 34px;
        max-width: 150px;
        margin-right: 10px;
        font-size: 12px;
        color: #999;
      }
    }
    .el-button {
      margin-top: 25px;
    }
  }
  .msg_list:hover {
    background-color: #f4f4f5;
  }
  .post_list {
    margin-top: 0;
    a {
      display: flex;
      width: 100%;
      height: 35px;
      font-size: 16px;
      line-height: 35px;
      border-bottom: 1px solid #e9e9e9;
      cursor: pointer;
      .el-badge {
        margin-left: auto;
        margin-top: 5px;
      }
      span {
        margin-left: 10px;
        font-size: 15px;
      }
      > div {
        margin-left: 30px;
        font-size: 12px;
        color: #999;
      }
    }
    a:hover {
      background-color: #f4f4f5;
    }
  }
}
</style>
